import React, { useState, useCallback } from 'react'
import { BComponent } from './BComponent'
import { CComponent } from './CComponent'

const AComponent: React.FC = (): JSX.Element => {
  const [count, setCount] = useState(0)

  const handleClick = useCallback((): void => {
    console.log('click')
    setCount((pre) => pre + 1)
  }, [])

  // const handleClick = () => {
  //   setCount((pre) => pre + 1)
  // }

  console.log('A is update')

  return (
    <div style={{ width: '300px', margin: '0 auto' }}>
      <div style={{ marginTop: '10px' }}>
        <div>count is{count}</div>
        <BComponent onClick={handleClick} />
      </div>
      <div style={{ marginTop: '10px' }}>
        <CComponent />
      </div>
    </div>
  )
}

export default AComponent
